<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 100px;
            top: 100px;
            /* 一、添加过渡效果 */
            /* 1. transition-property: 添加过渡效果的样式 */
            /* transition-property: left; */
            /* 2. transition-duration：过渡效果周期 */
            /* transition-duration: 2s; */
            /* 3. transition-timing-function：设置时间函数--控制运动速度
                    inherit 匀速
                    ease 规定慢速开始，然后变快，然后慢速结束的效果
                    ease-in 规定慢速开始的效果
                    ease-out 规定慢速结束的效果
                    ease-in-out 规定慢速开始和结束的效果
                    cubic-bezier(n, n, n, n) 在cubic-bezier函数中定义自己的值，可能是0到1之间的数值
             */
            /* transition-timing-function: inherit; */
            /* 4. transition-delay：设置延迟执行时间，单位s */
            /* transition-delay: 1s; */

            /* 二、简写: transition: 属性名称 周期 时间函数 延迟 */
            transition: left 2s inherit 1s;

            /* 三、注意：不要使用transition: all 2s; 效率十分低下 */
        }
        div:active {
            left: 1000px;
        }
    </style>
</head>

<body>
    <div></div>
</body>
</html>
